<template>
  <h1>App</h1>
  <ul>
    <li>
      <RouterLink to="/home">Home</RouterLink>
    </li>
    <li>
      <RouterLink to="/shop/100">Shop/100</RouterLink>
    </li>
  </ul>
  <h2>shop</h2>
  <h3>state</h3>
  {{ shopStore.title }}
  <hr>
  <button @click="shopStore.num++"> {{ shopStore.num }}</button>
  <hr>
  <button @click="shopStore.$reset()">重置</button>
  <hr>
  <button @click="shopStore.$patch({
    title: 'hello lili',
    num: shopStore.num + 1,
  })">变更</button>

  <hr>

  <button @click="shopStore.$patch((state) => {
    state.num++;
    state.title = 'hello lili';
  })">变更（回调）</button>



  <h3>getters</h3>
  {{ shopStore.g1 }}
  <hr>
  {{ shopStore.g2 }}
  <hr>
  {{ shopStore.g3(100) }}

  <h3>actions</h3>
  {{ shopStore.add(100, 200) }}

  <hr>

  <button @click="shopStore.say()">Say</button>


  <!-- ---------- -->
  <h2>cart</h2>
  <h3>state</h3>
  {{ cartStore.title }}
  <hr>
  <button @click="num++"> {{ num }}</button>

  <h3>getters</h3>
  {{ cartStore.g1 }}
  <hr>
  {{ cartStore.g2 }}

  <hr>
  {{ cartStore.g3(300) }}


  <hr>
  {{ cartStore.g4 }}

  <h3>actions</h3>
  {{ cartStore.add(300, 200) }}

  <hr>
  <button @click="cartStore.say()">Say</button>

  <hr>
  <!-- 报错 -->
  <button @click="cartStore.$reset()">重置</button>
  <hr>
  <button @click="cartStore.$patch({
    title: 'hello lili',
    num: cartStore.num + 1,
  })">变更</button>
  <RouterView></RouterView>
</template>

<script setup>

import { storeToRefs } from 'pinia';
import { useShopStore, useCartStore } from './store/s1.js';

const shopStore = useShopStore();
const cartStore = useCartStore();

const { num } = storeToRefs(cartStore);

console.log(num.value);


</script>

<style>
div {
  border: solid;
  padding: 10px;
}
</style>